﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="block1" style="display: none">
        <div class="map left" id="my">
        </div>
        <div class="map right" id="other">
        </div>
        <div class="clear">
        </div>
    </div>
    <div id="block2" style="display: none">
        <div></div>
        <div id="opponents">
        </div>
    </div>
    <div style='display: none;'>
        <audio id="shot" src="Content/empty.mp3" controls preload="auto" autobuffer></audio>
        <audio id="empty" src="Content/empty.mp3" controls preload="auto" autobuffer></audio>
        <audio id="hit" src="Content/hit.mp3" controls preload="auto" autobuffer></audio>
        <audio id="kill" src="Content/kill.mp3" controls preload="auto" autobuffer></audio>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            window.processId = 0;
            window.waitOpponentId = 0;
            window.id = 0;

            var Game = {
                proceed: function () {
                    window.processId = setInterval(function () {
                        $.ajax({
                            async: false,
                            type: 'POST',
                            url: 'Home/AjaxProceedGame',
                            dataType: 'json',
                            success: function (result) {
                                console.log(result);
                                clearInterval(window.processId);
                            },
                            error: function (xhr, status) {
                                alert('Sorry, there was a problem!');
                            }
                        });
                    }, 3000);
                },
                run: function () {
                    if (!$.cookie('userId')) {
                        $('#block2').show();
                        $.ajax({
                            async: false,
                            type: 'POST',
                            url: 'Home/AjaxRegisterUser',
                            data: { 'name': 'test_' + Math.round(new Date().getTime() + (Math.random() * 100)) },
                            dataType: 'json',
                            success: function (result) {
                                console.log(result);
                                window.id = result.id;
                                console.log('cookie ' + window.id);
                                $.cookie('userId', window.id);
                                window.Game.updateOpponents();
                            },
                            error: function (xhr, status) {
                                alert('Sorry, there was a problem!');
                            }
                        });
                    }
                    else {
                        $('#block1').show();
                        window.Game.updateOpponents();
                    }
                },
                updateOpponents: function () {
                    $.ajax({
                        async: false,
                        type: 'POST',
                        url: 'Home/AjaxWaitForOpponent',
                        dataType: 'json',
                        success: function (result) {
                            console.log(result);
                            var n = result.Users.length;
                            var t = '';
                            for (var i = 0; i < n; i++) {
                                t += '<div id="' + result.Users[i].Id + '" class="opponent">' + result.Users[i].Name + '</div>';
                            }
                            $('#opponents').html(t);

                        },
                        error: function (xhr, status) {
                            alert('Sorry, there was a problem!');
                        }
                    });
                }
            }
            window.Game = Game;
            Game.run();

            function shotSound() {
                var thissound = document.getElementById('shot');
                thissound.play();
            }

            function hitSound() {
                var thissound = document.getElementById('hit');
                thissound.play();
            }

            function killSound() {
                var thissound = document.getElementById('kill');
                thissound.play();
            }

            function emptySound() {
                var thissound = document.getElementById('empty');
                thissound.play();
            }



            var x = 0;
            var y = 0;

            function Map(id) {
                this.id = id;
                this.map = [];
            }

            Map.prototype.renderMap = function () {
                var t = '';
                var state = 0;
                t += '<table><tbody>';
                t += '<tr><th></th><th>Р</th><th>Е</th><th>С</th><th>П</th><th>У</th><th>Б</th><th>Л</th><th>И</th><th>К</th><th>А</th></tr>';
                for (var j = 0; j < 10; j++) {
                    t += '<tr><th>' + (j + 1) + '</th>';
                    for (var i = 0; i < 10; i++) {
                        t += '<td id="' + this.id + '_' + i + '_' + j + '" i="' + i + '" j="' + j + '">';
                        state = this.map[j][i];
                        switch (state) {
                            case 1:
                                t += '<img src="Content/atm_0.png" />';
                                break;
                            case 2:
                                t += '<span>x</span>';
                                break;
                            case 3:
                                t += '<img src="Content/atm_1.png" />';
                                break;
                            case 4:
                                t += '<img src="Content/atm_2.png" />';
                                break;
                            default:
                                break;
                        }
                        t += '</td>';
                    }
                    t += '</tr>';
                }
                t += '</tbody></table>';
                $('#' + this.id).html(t);
            }

            Map.prototype.renderShots = function () {
                for (var j = 0; j < 10; j++) {
                    for (var i = 0; i < 10; i++) {
                        if (1 == this.map[i][j]) {
                            this.renderShot(i, j, 0);
                        }
                    }
                }

            }

            Map.prototype.renderShot = function (i, j, state) {
                switch (state) {
                    case 2:
                        $('#' + this.id + '_' + i + '_' + j).html('<span>x</span>');
                        break;
                    case 3:
                        $('#' + this.id + '_' + i + '_' + j).html('<img src="Content/atm_1.png" />');
                        break;
                    case 4:
                        $('#' + this.id + '_' + i + '_' + j).html('<img src="Content/atm_2.png" />');
                        break;
                    default:
                        break;
                }

            }

            function MyMap(id) {
                this.id = id;
                this.map = [
                        [0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
                        [0, 0, 0, 0, 0, 0, 0, 1, 0, 0],
                        [0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
                        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                        [0, 0, 1, 0, 0, 0, 0, 1, 1, 1],
                        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                        [0, 0, 0, 0, 0, 1, 0, 1, 0, 1],
                        [0, 0, 0, 0, 0, 1, 0, 1, 0, 1],
                        [0, 0, 1, 0, 0, 0, 0, 0, 0, 1],
                        [0, 0, 1, 0, 0, 1, 1, 1, 0, 1]
                    ];
                //                this.atms = [
                //                        { type: 1, status: 0, data: [[1, 0]] },
                //                        { type: 1, status: 0, data: [[7, 1]] },
                //                        { type: 1, status: 0, data: [[3, 2]] },
                //                        { type: 1, status: 0, data: [[0, 5]] },

                //                        { type: 2, status: 0, data: [[5, 6], [5, 7]] },
                //                        { type: 2, status: 1, data: [[7, 6], [7, 7]] },
                //                        { type: 2, status: 0, data: [[2, 8], [2, 9]] },

                //                        { type: 3, status: 2, data: [[7, 4], [8, 4], [8, 4]] },
                //                        { type: 3, status: 0, data: [[5, 9], [6, 9], [7, 9]] },

                //                        { type: 4, status: 0, data: [[9, 6], [9, 7], [9, 8], [9, 9]] }
                //                    ];
            }
            MyMap.prototype = new Map();
            function OtherMap(id) {
                this.id = id;
                this.map = [];
                this.atms = [];
            }
            function OtherMap(id) {
                this.id = id;
                this.map = [
                        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                    ];
            }
            OtherMap.prototype = new Map();
            OtherMap.prototype.init = function () {

            }


            var myMap = new MyMap('my');
            myMap.renderMap();

            var otherMap = new OtherMap('other');
            otherMap.renderMap();
            $('#other td').bind('click', function () {
                document.x = $(this).attr('i');
                document.y = $(this).attr('j');
                $.ajax({
                    async: false,
                    type: 'POST',
                    url: 'Home/AjaxDoTurn',
                    data: {
                        'x': document.x,
                        'y': document.y
                    },
                    dataType: 'json',
                    success: function (result) {
                        otherMap.renderMap(result.opponentCells);
                        //
                        window.Game.proceed();
                    },
                    error: function (xhr, status) {
                        alert('Sorry, there was a problem!');
                    }
                });
            });
            $('.opponent').bind('click', function () {
                var t = 0;
                console.log('opponent id = ' + $(this).attr('id'));
                $.ajax({
                    async: false,
                    type: 'POST',
                    url: 'Home/AjaxStartGame',
                    data: {
                        'opponentId': $(this).attr('id')
                    },
                    dataType: 'json',
                    success: function (result) {
                        $(location).attr('href', 'Home/Index');
                    },
                    error: function (xhr, status) {
                        alert('Sorry, there was a problem!');
                    }
                });
            });
        });
    </script>
</asp:Content>
